// #############################################################################
// ### LESS CSS PREPROCESSOR ###################################################
// #############################################################################

// --- Variables ---------------------------------------------------------------

@color-core-light: #EEE;
@color-core-dark:  #333;

// -- Adobe Kuler: olive tree ------------------------------
// @color-base-light:       #00717D;
// @color-base-dark:        #003647;
// @color-highlight-strong: #F2D8A7;
// @color-highlight-medium: #A4A66A;
// @color-highlight-low:    #515932;

// -- Adobe Kuler: Beetle Bus goes Jamba Juice! ------------
// @color-base-light:       #BFBB11;
// @color-base-dark:        #730046;
// @color-highlight-strong: #FFC200;
// @color-highlight-medium: #E88801;
// @color-highlight-low:    #C93C00;

// -- Adobe Kuler: california ------------------------------
@color-base-light:       #03658C;
@color-base-dark:        #022E40;
@color-highlight-strong: #F2B705;
@color-highlight-medium: #F28705;
@color-highlight-low:    #F25C05;

@color-shadow-default: #000;

// --- Mix-Ins -----------------------------------------------------------------

.corners-round(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

.shadow-box(@offsetH: 3px, @offsetV: 3px, @color: @color-shadow-default, @blur: 9px, @spread: 0) {
	-moz-box-shadow: @offsetH @offsetV @blur @spread @color;
	-webkit-box-shadow: @offsetH @offsetV @blur @spread @color;
	box-shadow: @offsetH @offsetV @blur @spread @color;
}

.rotate(@degrees: 10deg) {
	-moz-transform: rotate(@degrees);
	-webkit-transform: rotate(@degrees);
	-o-transform: rotate(@degrees);
	-ms-transform: rotate(@degrees);
	transform: rotate(@degrees);
}

.form-gradient(@color: #EEEEEE) {
	background: -moz-linear-gradient(top, #FFFFFF, @color 1px, #FFFFFF 25px);
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, @color), to(#FFFFFF));
	background: -webkit-linear-gradient(top, #FFFFFF, @color 1px, #FFFFFF 25px);
	background: -o-linear-gradient(top, #FFFFFF, @color 1px, #FFFFFF 25px);
	background: linear-gradient(top, #FFFFFF, @color 1px, #FFFFFF 25px);
}

/* --- Fonts ---------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
#logo {
	font-family: 'Amaranth', sans-serif;
}

body {
	font-family: 'Droid Sans', sans-serif;
}

/* --- Layout --------------------------------------------------------------- */

header {
	padding: 1em;
	margin-bottom: 1em;
}

footer {
	overflow: hidden;
	margin-top: 3em;
	margin-bottom: 1em;
}

footer .sticker {
	float: right;
}

#logo {
	font-size: 2.5em;
}

#mainmenu {
	padding: 0.25em;
}

#mainmenu ul li {
	display: inline-block;
}

#mainmenu ul li a {
	padding: 0.3em 0.8em;
	display: block;
	.corners-round(3px);
}

#breadcrumbs .breadcrumbs {
	padding: 0.5em;
}

#breadcrumbs .breadcrumbs a,
#breadcrumbs .breadcrumbs span {
	padding: 0.25em 0.5em;
	display: inline-block;
}

#content {
	margin-top: 1em;
}

#content h1 {
	margin-bottom: 0.5em;
}

.container {
	overflow: hidden;
	width: 960px;
	margin: 0 auto;
}

/* --- Decoration ----------------------------------------------------------- */

html {
	background-color: @color-core-light;
}

body {
	color: @color-core-dark;
}

header {
	color: @color-highlight-strong;
	background-color: @color-base-dark;
	border-bottom: 0.5em solid @color-base-light;
}

header a,
header a:active,
header a:visited {
	color: @color-highlight-strong;
}

header a:hover {
	color: @color-highlight-medium;
}

a,
a:active,
a:visited {
	text-decoration: none;
	color: @color-highlight-low;
}

a:hover {
	color: @color-base-light;
}

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1.4em;
}

h4 {
	font-size: 1.3em;
}

h5 {
	font-size: 1.2em;
}

h6 {
	font-size: 1.1em;
}

#mainmenu {
	color: @color-core-dark;
	background-color: @color-highlight-strong;
	.corners-round();
}

#mainmenu ul li a {
	font-size: 1.2em;
	font-weight: bold;
	color: @color-core-dark;
	text-decoration: none;
}

#mainmenu ul li.active a {
	background-color: @color-highlight-medium;
}

#mainmenu ul li a:hover {
	background-color: @color-highlight-low;
}

#breadcrumbs .breadcrumbs {
	font-size: 0.95em;
	font-weight: bold;
}

#breadcrumbs .breadcrumbs a,
#breadcrumbs .breadcrumbs span {
	background-color: rgba(0,0,0,0.125);
	.corners-round(3px);
}

#breadcrumbs .breadcrumbs a:hover {
	color: @color-core-light;
	background-color: @color-highlight-medium;
}

#content h1 {
	font-size: 2em;
}

/* --- Form Translations ---------------------------------------------------- */

.row {
	padding: 5px 10px;
	
	.errorMessage {
		float: right;
		background-color: #F25C05;
		color: #FFFFFF;
		padding: 9px;
		.corners-round(6px);
	}	
}

textarea,
input[type=text],
input[type=password], {
	padding: 9px;
	border: solid 1px #DDDDDD;
	outline: 0;
	font: normal 13px/100% 'Droid Sans', sans-serif;
	vertical-align: middle;
	.shadow-box(0px, 0px, rgba(0,0,0,0.1), 8px);
	.form-gradient(#EEEEEE);
	
	&:hover, &:focus {
		border-color: #BBBBBB;
		.shadow-box(0px, 0px, rgba(0,0,0,0.2), 8px);
	}
	
	+ label {
		margin-left: 10px;
		font-size: 19px;
		font-weight: bold;
		font-style: italic;
		color: #aaa;
	}
}

.row.error {
	textarea,
	input[type=text],
	input[type=password], {
		.shadow-box(0px, 0px, rgba(255,94,0,0.4), 8px);
		
		&:hover, &:focus {
			.shadow-box(0px, 0px, rgba(255,94,0,0.6), 8px);
		}
	}
}

.row.success {
	textarea,
	input[type=text],
	input[type=password], {
		.shadow-box(0px, 0px, rgba(0,183,255,0.4), 8px);
		
		&:hover, &:focus {
			.shadow-box(0px, 0px, rgba(0,183,255,0.6), 8px);
		}
	}
}


/* ========================================================================== *\
 * === Zii Stuff ============================================================ *
\* ========================================================================== */

/* --- Grid View ------------------------------------------------------------ */

#dsitc {
	
	.grid-view {

		.summary {
			padding: 4px 8px;
			background: rgba(0,0,0,0.125);
			.corners-round(3px);
		}

		table.items {
			border: 0;
			
			thead {
				background: rgba(0,0,0,0.125);
			}
			
			th {
				background: none;
				color: #000;
				
				a {
					color: #000;
				}
			}
			
			tr.odd {
				background: rgba(0,0,0,0.125);
			}
			
			tr.even {
				background: none;
			}
		}
	}	
}
